import * as THREE from 'three';

// Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'


const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, 1.0 , 0.1, 1000 );
// 将视觉移到立方体中心，并让贴图内翻转一下，就能实现全景看房
camera.position.set(0,0,30);
camera.lookAt(0, 0, 0);


const renderer = new THREE.WebGLRenderer({ antialias: true }); 

renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement )


const textureLoader = new THREE.TextureLoader()

// 右左 上下 前后  人站在房子里面的视角观看
const images = [
	'./view-house/right.jpg', 
	'./view-house/left.jpg',
	'./view-house/top.jpg',
	'./view-house/bottom.jpg',
	'./view-house/front.jpg', 
	'./view-house/back.jpg',
]
let materials = [] //存储不同面的贴图
images.forEach(imgUrl => {
	const texture = textureLoader.load(imgUrl)
	const material = new THREE.MeshBasicMaterial( { 
		map: texture,
	} )
	materials.push(material)
})

// 1、创建立方体盒子  实现看房
const cube = new THREE.Mesh(
	new THREE.BoxGeometry( 40, 40, 40 ),
  materials, //六个面不同的贴图
)
cube.geometry.scale(12, 12, -12)
scene.add(cube)

//辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(1000);
// 设置x,y,z轴的颜色
axesHelper.setColors(new THREE.Color(0xff0000), new THREE.Color(0x00ff00), new THREE.Color('pink'))
scene.add(axesHelper);


// 控制器的使用
// 控制器实例化  参数：相机  绑定事件的元素
const controls = new OrbitControls( camera, renderer.domElement );

//controls.update() must be called after any manual changes to the camera's transform
controls.enableDamping = true //启用惯性


controls.addEventListener('change', () => {
  renderer.render( scene, camera )
  console.log(camera.position);
  
})

const clock = new THREE.Clock();
function animate(){
	const elapsedTime = clock.getDelta()
	controls.update();
	requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate()